﻿@{
    Layout = null;
    ViewData["Title"] = "IndexDelete";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>人力资源档案永久删除</h1>
<div id="app">
    <el-table :data="human_files"
              style="width: 100%">
        <el-table-column prop="human_id"
                         label="档案编号"
                         width="180">
            <!--<template slot-scope="scope">
            @*这里业务场景的点击事件,是不需要用到按钮的,所以我们需要用到的是原生的vue点击事件,而加native.prevent的精髓就在此*@
                <el-button v-on:click.native.prevent="handleClickLook(scope.row)" type="text" size="small">{{scope.row.human_id}}</el-button>
            </template>-->
        </el-table-column>
        <el-table-column prop="human_name"
                         label="姓名"
                         width="100">
        </el-table-column>
        <el-table-column prop="human_sex"
                         label="性别"
                         width="100">
        </el-table-column>
        <el-table-column prop="first_kind_name"
                         label="I级机构"
                         width="130">
        </el-table-column>
        <el-table-column prop="second_kind_name"
                         label="II级机构"
                         width="130">
        </el-table-column>
        <el-table-column prop="third_kind_name"
                         label="III级机构"
                         width="130">
        </el-table-column>
        <el-table-column prop="human_major_kind_name"
                         label="职位分类"
                         width="130">
        </el-table-column>
        <el-table-column prop="human_major_name"
                         label="职位名称"
                         width="130">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="120">
            <template slot-scope="scope">
                <el-button v-on:click.native.prevent="deleteRow(scope.row.huf_id)"
                           type="text"
                           size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-on:size-change="handleSizeChange"
                   v-on:current-change="handleCurrentChange"
                   :current-page="pagecurrent"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="rows">
    </el-pagination>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            human_files: [],
            pagesize: 3,
            pagecurrent: 1,
            rows: 0,
        },
        methods: {
            fill() {
                axios.get("/HumanFileDele/HumanFileUdpDelFinds?pagesize=" + this.pagesize + "&pagecurrent=" + this.pagecurrent).then(res => {
                    this.human_files = res.data.tabs;
                    this.rows = res.data.rows;
                })
            },
            handleSizeChange(val) {
                this.pagesize = val;
                this.fill();
            },
            handleCurrentChange(val) {
                this.pagecurrent = val;
                this.fill();
            },
            //点击删除按钮操作
            deleteRow(huf_id) {
                console.info("huf_id:", huf_id);
                this.$confirm("确定要永久删除这条档案信息嘛？(无法恢复)").then(res => {
                     axios.delete("/HumanFileDele/HumanFileDelete?huf_id=" + huf_id).then((res) => {
                        if (res.data > 0) {
                            this.$message({ message: '永久删除档案成功！', type: 'success' });
                            this.fill();
                        }
                    })
                }).catch(err => {
                    this.$message({ message: "取消删除操作", type: 'warning' });
                })
            }
        },
        mounted: function() {
            this.fill();
        }
    })


</script>